<template>
    <section>
      <div class="register">
        <router-link :to="{name:'increase'}"><span class="glyphicon glyphicon-menu-left pull-left"></span></router-link>
        <span class="register-span">搜索地址</span>
      </div>
      <div class="center">
        <input type="text" placeholder="小区/写字楼/学校等" class="form-control" v-model="valueSite">
        <button class="btn btn-success" @click="searchAddress">确认</button>
      </div>
      <div class="div">
        <p>为了满足商家的送餐要求,建议您从列表中选择地址</p>
      </div>
      <div class="middle" v-if="text">
        <p>找不到地址?</p>
        <p>请尝试输入小区,写字楼或学校名</p>
        <p>详细地址 (如门牌号) 可稍后输入哦.</p>
      </div>
      <div v-for="item in valueArr" class="foot" @click="toSite(item.name)">
        <li>
          <p>{{item.name}}</p>
          <p>{{item.address}}</p>
        </li>
      </div>
    </section>
</template>

<script>
  import Vue from 'vue'
    export default {
        name: "searchAddress",
      data(){
          return {
            valueSite:'',//输入框的值
            text:true,//该页面中部内容是否显示
            valueArr:[],//根据输入框的值匹配到的数据
            cityID:this.$store.state.cityID,//获取城市id
          }
      },
      methods:{
        searchAddress(){
          //根据输入框的值匹配数据
          Vue.axios.get('https://elm.cangdu.org/v1/pois?city_id=' + this.cityID + '&keyword=' + this.valueSite + '&type=search').then(res=>{
            this.valueArr = res.data
            console.log(res.data)
            this.text = false
          })
        },
        toSite(i){
          //将值传给main
          this.$store.commit('event1',i);
          console.log(i)
          this.$router.push({name:'increase'})
        }
      },
      created(){
        console.log(this.cityID)
      },
    }
</script>

<style scoped>
  .center{
    width: 100%;
    height: 0.55rem;
    padding-top: 0.1rem;
    background-color: white;
    text-align: center;
  }
  .center input{
    width: 75%;
    float: left;
    margin: 0 0 0.1rem 0.1rem;
    background-color: #F2F2F2;
  }
  .btn{
    width: 18%;
    float: right;
    margin-right: 0.1rem;
  }
  .div{
    width: 100%;
    height: 0.3rem;
    background-color: #FFF6E4;
    text-align: center;
    line-height: 0.3rem;
  }
  .div p{
    margin-left: 0.1rem;
    color: #FF883F;
    font-size: 0.14rem;
  }
  .middle{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 50%;
    text-align: center;
    color: #A3A3A3;
  }
  .foot{
    width: 100%;
    border-bottom: 0.01rem solid #969696;
  }
  li{
    list-style: none;
    margin: 0.1rem 0 0 0.1rem;
    color: #969696;
  }
</style>
